// web/src/components/learn/editor.tsx
'use client';
import React, {useMemo} from 'react';

import 'react-quill/dist/quill.snow.css'
import dynamic from "next/dynamic";

interface Props {
    onChange: (value: string) => void;
    value: string;
}

const Editor = ({
                    onChange, value
                }: Props) => {
    // nextjs在服务端渲染一次, 在客户端渲染一次, 使用ssr:false防止服务端的渲染客户端组件导致错误
    const ReactQuill = useMemo(() => dynamic(
        () => import('react-quill'), {ssr: false},
    ), [])

    return (
        <div className={`prose bg-white`}>
            <ReactQuill
                theme={'snow'}
                value={value}
                onChange={onChange}
            />
        </div>
    );
};

export default Editor;